* {
    /* *号权重是0 继承的权重是null 0>null */
    padding: 0;
    margin: 0;
}
html,body {
    background-color: rgb(54, 54, 54);
}
.main {
    margin: 30px;
    width: 200px;
    height: 200px;
    border: 1px solid whitesmoke;
    position: relative;
}

.main>p:nth-child(1) {
    transition: all 1s 0s linear;
    width: 100px;
    height: 200px;
    background-color: rgb(240, 221, 7);
    margin: auto;
    /* 透视 */
    transform-style: preserve-3d;
    transform: perspective(100px) rotateY(45deg) translate3d(0, 0, 0);
}

.main:hover>p:nth-child(1) {
    width: 100px;
    height: 200px;
    background-color: rgb(240, 221, 7);
    margin: auto;
    /* 透视 */
    transform: perspective(900px) rotateY(45deg) translate3d(500px, 0, -200px);
}





/* 例子一 */
.mian-wrap{
    width: 180px;
    margin: 50px;
    height: 300px;
    background-color: #1f1f1f;
}

.pages {
    width: 180px;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.pages>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    transform: translateY(-100%);
    transition: .5s;
}

.pages>div:nth-of-type(1) {
    background-color: green;
}

.pages>div:nth-of-type(2) {
    background-color: rgb(187, 220, 23);
}

.pages>div:nth-of-type(3) {
    background-color: rgb(0, 119, 128);
}

.pages>div:target {
    transform: translateY(0);
}

nav {
    width: 100%;
    background-color: beige;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    height: 50px;
}



/* 例子二 */
.word-wrap {
    margin: 50px;
    height: 100px;
    background-color: black;
    display: grid;
    grid-template-rows: 30px;
    grid-template-columns: 100%;
    place-content: center;
}

.word {
    color: white;
    cursor: pointer;
}
.word:hover {
    background-color: rgb(80, 80, 80);
}
strong {
    transition: 1s;
    transform: rotate(0);
    display: inline-block;
}
 
.word>strong:nth-of-type(1) {
    padding: 10px;
    background-color: rgb(92, 52, 0);
    border-radius: 50%;
}

.word>strong:nth-of-type(2) {
    padding: 10px;
    background-color: rgb(0, 117, 49);
    border-radius: 50%;
}

.word:hover>strong:nth-of-type(1) {
    background-color: rgb(186, 106, 1);
    transform: rotate(360deg);
}

.word:hover>strong:nth-of-type(2) {
    background-color: rgb(0, 254, 106);
    transform: rotate(-360deg);
}